@mixin select-size($height, $padding, $font-size, $border-radius) {  

  .ui-select-selection {
    min-height: $height;
    font-size: $font-size;

    .ui-select-text {
      line-height: $height - 2;
      padding-left: $padding;
      padding-right: $height;

      input {
        height: $height;
        padding-left: $padding;
        padding-right: $height;
      }
    }

    .ui-select-icon,
    .ui-select-arrow {
      right: ($height - $font-size) / 2;
      margin-top:  - $font-size / 2;
    }
  }

  .ui-dropdown {
    position: absolute;
    left: 0;
    top: $height + 4;

    .ui-select-notfound {
      margin: $padding;
    }
  }

  &.radius {
    .ui-select-selection {
      border-radius: $border-radius;
    }
  }
}

.ui-select {
  @include select-size($base-height, $base-padding, $base-fontSize, $base-radius);
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  color: #666;

  .ui-select-selection {
    outline: none;
    user-select: none;
    display: block;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    /*box-shadow: inset 0 1px 3px #e3e3e3;*/
    cursor: pointer;
    
    &:hover {
      border-color: #57c5f7;
    }

    &:active {
      border-color: #57c5f7;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    }

    .ui-select-text {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: 0;
        color: #333;
        font-size: 100%;
        background: transparent;
        outline: 0;
      }

      &.ui-select-text-placeholder {
        color: #ccc;
      }
    }

    .ui-select-icon,
    .ui-select-arrow {
      position: absolute;
      top: 50%;
      color: #d9d9d9;
      transition: transform .2s ease;
      line-height: normal;
    }
  }

  .ui-dropdown {
    .ui-select-notfound {
      color: #ccc;
    }
  }

  &.ui-select-open {
    .ui-select-selection {
      border-color: #57c5f7;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);

      .ui-select-arrow {
        transform: rotate(180deg);
      }
    }
  }

  &.disabled {
    .ui-select-selection {
      cursor: not-allowed;
      background-color: #f3f5f7;

      &:hover {
        border-color: #d9d9d9;
      }

      &:active {
        border-color: #d9d9d9;
      }
    }
  }

  &.size-xl {
    @include select-size($base-height-xl, $base-padding-xl, $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include select-size($base-height-lg, $base-padding-lg, $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include select-size($base-height-sm, $base-padding-sm, $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include select-size($base-height-xs, $base-padding-xs, $base-fontSize-xs, $base-radius-xs);
  }

}